<template>
 <div>
  <div class="footer_wrap">
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/mymusic">我的音乐</router-link>
    <router-link to="/attention">关注</router-link>
    <router-link to="/shopping">商城</router-link>
    <router-link to="/musician">音乐人</router-link>
    <router-link to="/download">下载客户端</router-link>
  </div>
  <div class="top">
    <router-view></router-view>
  </div>
 </div>
</template>

<script>
export default {}
</script>

<style scoped>
.router-link-exact-active,
.router-link-active {
  background-color: #555 !important;
}
.footer_wrap {
 position: fixed;
 left: 0;
 top: 0;
 display: flex;
 width: 100%;
 text-align: center;
 background-color: #333;
 color: #ccc;
}
.footer_wrap a {
 flex: 1;
 text-decoration: none;
 padding: 20px 0;
 line-height: 20px;
 background-color: #333;
 color: #ccc;
 border: 1px solid black;
}
.footer_wrap a:hover {
 background-color: #555;
}
.top {
 padding-top: 62px;
}
</style>
